<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
</head>

<style>
    #app {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

<body>

<div id="app">
    <p id="slope">斜率:</p>
    <label for="slope">
        <input v-model="slope" type="number" max="99999" min="0" step="0.1">
    </label>
    <p id="intercept">截距:</p>
    <label for="intercept">
        <input v-model="intercept" type="number" max="99999" min="0" step="0.1">
    </label>
    <p id="X">X:</p>
    <label for="X">
        <input v-model="X" type="number" max="99999" min="0" step="0.1">
    </label>
    <p id="F">F:</p>
    <label for="F">
        <input v-model="F" type="number" max="99999" min="0" step="0.1">
    </label>
    <hr>
    <hr>
    <div>
        <p>计算公式: ({{slope}} * X + {{intercept}}) * F</p>
        <p>结果: {{ (slope * X + intercept) * F }}</p>
    </div>
</div>

<script src="/js/vue.global.prod.js"></script>
<script src="/js/vue_base.js"></script>
<script>
    createVueAppAll("app", {
        data() {
            return {
                // 斜率
                slope: 1,
                // 截距
                intercept: 1,
                X: 1,
                F: 1,
                // 结果:
                result: 0
            }
        },
        methods: {

        }
    })
</script>
</body>
</html>